<template>
    <div class="fullScreen bg-c-wh">
        <lot-header></lot-header>
        <description v-if="this.$store.state.lotPlayDesc"></description>
        <div class="tx-s-14">
            <!-- 期数、倒计时、历史数据 -->
            <lot-overview></lot-overview>
            <!-- 提示 -->
            <div class="flex-box flex-ac flex-pe pad-tb">
                <div class="iconSize-125 icon_prompt marg-03"></div>
                <div class="tx-s-14 tx-c-666 mar-r-5" @click="showDesc()">玩法提示</div>
            </div>
            <div class="scroll-lot" v-if="lotData != null">
                <!-- 特码 -->
                <div v-show="lotPlayIndex == 0">
                    <lhc-options :title="['tm', '']" :content="c1z49Cont" :odds="lotOdds.tm.pl" :temp="7"></lhc-options>
                    <lhc-options :title="['tm', '']" :content="hwbCont" :odds="lotOdds.tm" :temp="4"></lhc-options>
                </div>
                <!-- 正码 -->
                <div v-show="lotPlayIndex == 1">
                    <lhc-options :title="['zm', '']" :content="c1z49Cont" :odds="lotOdds.zm.pl" :temp="7"></lhc-options>
                    <lhc-options :title="['zm', '']" :content="zdxdsCont" :odds="lotOdds.zm" :temp="4"></lhc-options>
                </div>
                <!-- 正特码 -->
                <div v-show="lotPlayIndex == 2">
                    <!-- <lhc-cont-tab :title="'ztm'" :tab="ztmPlay"></lhc-cont-tab> -->
                </div>
                <!-- 连码 -->
                <div v-show="lotPlayIndex == 3">
                </div>
                <!-- 过关 -->
                <div v-show="lotPlayIndex == 4">
                </div>
                <!-- 特肖 -->
                <div v-show="lotPlayIndex == 5" v-if="this.$store.state.sxNumber != ''">
                    <lhc-options :title="['tx', '']" :content="sxCont()" :odds="lotOdds.tx" :temp="20"></lhc-options>
                </div>
                <!-- 特码头尾 -->
                <div v-show="lotPlayIndex == 6">
                    <div class="title-lot">特玛头</div>
                    <lhc-options :title="['tmtw', '']" :content="tmtCont" :odds="lotOdds.tmtw.tmt" :temp="4"></lhc-options>
                    <div class="title-lot">特玛尾</div>
                    <lhc-options :title="['tmtw', '']" :content="tmwCont" :odds="lotOdds.tmtw.tmw" :temp="4"></lhc-options>
                </div>
                <!-- 五行 -->
                <div v-show="lotPlayIndex == 7">
                    <lhc-options :title="['wx', '']" :content="wxCont" :odds="lotOdds.wx" :temp="1"></lhc-options>
                </div>
                <!-- 半波 -->
                <div v-show="lotPlayIndex == 8">
                    <lhc-options :title="['bb', '']" :content="bbCont" :odds="lotOdds.bb" :temp="20"></lhc-options>
                </div>
                <!-- 七码 -->
                <div v-show="lotPlayIndex == 9">
                    <div v-for="(value, key) in qmPlay" :key="key">
                        <div class="title-lot">{{ value }}</div>
                        <lhc-options :title="['qm', '']" :content="qmCont[key]" :odds="lotOdds.qm" :temp="4"></lhc-options>
                    </div>
                </div>
                <!-- 六肖 -->
                <div v-show="lotPlayIndex == 10">
                </div>
                <!-- 一肖尾数 -->
                <div v-show="lotPlayIndex == 11">
                    <!-- <lhc-cont-tab :title="'yxws'" :tab="yxwsPlay"></lhc-cont-tab> -->
                </div>
                <!-- 生肖连 -->
                <div v-show="lotPlayIndex == 12">
                </div>
                <!-- 尾数连 -->
                <div v-show="lotPlayIndex == 13">
                </div>
                <!-- 不中 -->
                <div v-show="lotPlayIndex == 14">
                </div>
                <!-- 多选中一 -->
                <div v-show="lotPlayIndex == 15">
                </div>
                <!-- 特平中 -->
                <div v-show="lotPlayIndex == 16">
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class="flex-box flex-pj lotteryFooter tx-s-14">
            <div class="tx-c-r bor-r-g footer-btn" @click="cancel">重置</div>
            <div class="flex-box flex-f1">
                <input v-model="money" class="input-ol-n wd-fh tx-c" type="number" placeholder="请输入单注金额" />
            </div>
            <div class="tx-c-g bor-l-g footer-btn" @click="confirm">确定</div>
        </div> 
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import { mapGetters } from 'vuex' 
import { isEmptyObject } from '../../../common/js/common'
import Trans from '../../../common/js/eventTrans'
import LotHeader from "../../../components/lottery/lot-header"
import description from "../../../components/lottery/description"
import LotOverview from "../../../components/lottery/lotOverview"
import LhcContTab from "../../../components/lottery/lhcContTab"
import LhcOptions from "../../../components/lottery/lhcOptions"
import { c1z49Cont, hwbCont, zdxdsCont, ztmPlay, tmtCont, tmwCont, wxCont, bbCont, qmPlay, qmdanCont, qmsCont, qmdaCont, qmxCont, yxwsPlay, sxCont } from '../../../common/js/data' 
import { sxNumber } from '../../../common/js/axiosUtil'
export default {
    data () {
        return {
            money : '',
            c1z49Cont : c1z49Cont(), // 数字内容
            hwbCont : hwbCont, // 特码合尾波内容
            zdxdsCont : zdxdsCont, // 正码总内容
            ztmPlay : ztmPlay, // 正特码玩法
            tmtCont : tmtCont, // 特玛头内容
            tmwCont : tmwCont, // 特玛尾内容
            wxCont : wxCont, // 五行内容
            bbCont : bbCont, // 半波内容
            qmPlay : qmPlay, // 七码玩法
            qmCont : {
                qmdanCont : qmdanCont, // 七码单内容
                qmsCont : qmsCont, // 七码双内容
                qmdaCont : qmdaCont, // 七码大内容
                qmxCont : qmxCont // 七码小内容
            },
            yxwsPlay : yxwsPlay
        }
    },
    created () {
        this.getSxNumber()
    },
    mounted () {
        var _this = this
        Trans.$on('togLotteryTab', function (msg) {
            _this.cancel()
        })
    },
    methods: {
        // 重置，清空所有操作
        cancel () { 
            this.money = ''
            this.$store.state.lotOptions = []
            this.$store.state.lotSelData = []
        },
        // 确定
        confirm () {
            const {lotStatus} = this.$store.state
            if(lotStatus == 0){
                this.$alert('已封盘')
            }else if(lotStatus == -1){ 
                this.$alert('已关盘')
            }else if(isEmptyObject(this.$store.state.lotSelData)){
                this.$toast('未下注', 2000)
            }else if(lotStatus == 1){
                this.$router.push({
                    path: '/lotteryOrder',
                    query: {
                        inputPrice : this.money || this.lotData.min,
                        payPriceMin : this.lotData.min,
                        payPriceMax : this.lotData.max
                    }
                })
            }
        },
        // 打开玩法提示
        showDesc () {
            this.$store.state.lotPlayDesc = true
        },
        // 获取彩票数据
        getSxNumber () { 
            let params = new URLSearchParams()
            const token = this.$token()
            params.append('timeStamp', token[0])
            params.append('token', token[1])
            sxNumber(params)
            .then((response)=> {
                if(response.data.code == "200"){ 
                    let data = response.data.data.sxNumber
                    this.$store.state.sxNumber = data
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        },
        sxCont () {
            return sxCont()
        }
    },
    components: {
        LotHeader,
        description,
        LotOverview,
        LhcContTab,
        LhcOptions
    },
    computed: {
        ...mapGetters([
            'lotData',
            'lotOdds',
            'lotPlayIndex'
        ])
    }
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .scroll-lot
        position : fixed
        top : 9.25rem
        bottom : 3.25rem
        width : 96%
        margin : 0 2%
        overflow: auto
    .scroll-lot::-webkit-scrollbar
        display : none
</style> 